<!DOCTYPE html>  
<html>  
<meta charset="UTF-8"/>
<head>  
    <title></title>  
    <style type="text/css">  
        * {  
            font: normal normal 15px "微软雅黑";  
        }  
        div {  
            width: 380px;  
            margin: 0 auto;  
        }  
        table {  
            margin: 20px auto;  
        }  
        input {  
            width: 180px;  
            height: 20px;  
            outline: none;  
        }  
        h1 {  
            font-size: 22px;  
            text-align: center;  
        }  
        h2 {  
            font-size: 18px;  
            line-height: 18px;  
            font-weight: normal;  
            text-align: center;  
        }  
        table {  
            width: 360px;  
            border: 1px solid #99D;  
            padding: 20px;  
        }  
        table tr td {  
            height: 32px;  
            text-align: right;  
        }  
        #calc {  
            display: block;  
            width: 80px;  
            height: 28px;  
            margin: 0 auto;  
            color: #FFF;  
            background-color: #E23;  
            border: none;  
        }  
    </style> 
</head>  
<body>  
    <div>  
        <h1>存款利息计算器</h1>  
        <table>  
            <tr>  
                <td>存款金额</td>  
                <td><input type="text" id="money"/></td>  
                <td>元</td>  
            </tr>   
            <tr>  
                <td>年利率</td>  
                <td><input type="text" id="per"/></td>  
                <td>%</td>  
            </tr>  
            <tr>  
                <td>期限（年数）</td>  
                <td><input type="text" id="year"/></td>  
                <td>年</td>  
            </tr>  
            <tr>  
                <td colspan="3"><input type="button" id="calc" value="计算" onclick="calcMon()"/></td>  
            </tr>  
            <tr>  
                <td>利息</td>  
                <td><input type="text" id="interest" disabled="disabled"/></td>  
                <td>元</td>  
            </tr>  
                <td>本息总额</td>  
                <td><input type="text" id="all" disabled="disabled"/></td>  
                <td>元</td>  
            </tr>  
        </table>    
    </div>  
    <script type="text/javascript">  
        function calcMon(){
            if(isNaN(money.value)==true||money.value<=0){
                alert("请输入正确的存款金额");
                return;
            }
            if(isNaN(per.value)==true||per.value<=0){
                alert("请输入正确的年利率");
                return;
            }
            if(isNaN(year.value)==true||year.value<0){
                alert("请输入正确的年份");
                return;
            }
            var qian=parseFloat(money.value);
            var lilv=parseFloat(per.value);
            var nian=parseInt(year.value);
            interest.value=qian*(lilv/100);
            all.value=qian*(lilv/100)*nian+qian;
        }
    </script>  
</body>  
</html>  